<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport"
    content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  <meta content="telephone=no" name="format-detection" />
  <!-- 留作将来统一添加 -->
  <TEMPLATE>${TEMPLATE}</TEMPLATE>
  <title>听力和判断</title>
  <link rel="stylesheet" type="text/css" href="../../css/api.css" />
  <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
  <link rel="stylesheet" type="text/css" href="../../css/index.css">
  <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
  <style type="text/css">
    body {
      background: rgba(90, 194, 255, 1);
    }

    .wrapper {
      position: relative;
      padding-top: 20px;
      height: 489px;
    }

    .z-index-1 {
      z-index: 1;
      position: absolute;
      top: 20px;
      width: 100%;
      height: 450px;
      padding: 0 50px;
    }

    .z-index-1 .area {
      height: 450px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 10px;
    }

    .z-index-2 {
      z-index: 2;
      position: absolute;
      top: 24px;
      width: 100%;
      height: 450px;
      padding: 0 37.5px;
    }

    .z-index-2 .area {
      height: 450px;
      background: rgba(255, 255, 255, 0.6);
      border-radius: 10px;
    }

    .z-index-3 {
      z-index: 3;
      position: absolute;
      top: 31px;
      width: 100%;
      height: 450px;
      padding: 0 27.5px;
    }

    .z-index-3 .area {
      height: 450px;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 10px;
    }

    .z-index-4 {
      z-index: 4;
      position: absolute;
      top: 39px;
      width: 100%;
      height: 450px;
      padding: 0 15px;
    }

    .z-index-4 .area {
      height: 450px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 11px 19px 0px rgba(0, 135, 214, 0.37);
      border-radius: 10px;
    }

    .head {
      height: 67px;
      padding: 7px 8px 0 15px;
    }

    .head .left {
      font-size: 18px;
      font-weight: 500;
      color: rgba(25, 25, 25, 1);
    }

    .head .rect {
      width: 4px;
      height: 18px;
      margin-right: 8px;
    }

    .head .play {
      width: 60px;
      height: 60px;
    }

    .content {
      margin-top: 7px;
      padding: 0 15px;
      font-size: 15px;
      font-weight: 500;
      color: rgba(25, 25, 25, 1);
      line-height: 26px;
    }

    .btns {
      margin-top: 36px;
    }

    .btns .btn1 {
      width: 162.5px;
      height: 46px;
      background-image: url("../../image/course/btn3.png");
      background-size: 100%;
      margin-right: 19px;
      font-size: 18px;
      font-weight: 600;
      color: rgba(124, 69, 0, 1);
      text-align: center;
    }

    .btns .btn2 {
      width: 162.5px;
      height: 46px;
      background-image: url("../../image/course/btn4.png");
      background-size: 100%;
      font-size: 18px;
      font-weight: 600;
      color: rgba(124, 69, 0, 1);
      text-align: center;
    }

    .btns .txt {
      margin-top: 8px;
    }

    .cover {
      width: 200px;
      height: 150px;
      margin: 10px auto 0 auto;
    }

    .selects {
      height: 70px;
      margin-top: 15px;
    }

    .selects .select1 {
      width: 50px;
      height: 50px;
      line-height: 50px;
      border-radius: 50%;
      text-align: center;
      background: rgba(253, 155, 67, 1);
      box-shadow: 0px 4px 12px 0px rgba(253, 155, 67, 0.7);
      margin-right: 65px;
      font-size: 15px;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }

    .selects .select2 {
      width: 50px;
      height: 50px;
      line-height: 50px;
      border-radius: 50%;
      text-align: center;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 4px 12px 0px rgba(253, 155, 67, 0.7);
      font-size: 15px;
      font-weight: 500;
      color: rgba(231, 109, 0, 1);
    }
  </style>
</head>

<body>
  <div class="vueApp" v-cloak>
    <div class="wrapper">
      <div class="z-index-1">
        <div class="area"></div>
      </div>
      <div class="z-index-2">
        <div class="area"></div>
      </div>
      <div class="z-index-3">
        <div class="area"></div>
      </div>
      <div class="z-index-4">
        <div class="area">
          <div class="head" data-flex="main:justify cross:center">
            <div class="left" data-flex>
              <img class="rect" src="../../image/course/rect2.png" alt="">
              这是题目
            </div>
            <img class="play" src="../../image/course/play2.png" alt="">
          </div>
          <div class="content">
            这是题目内容这是题目内容这是题目内容这是题目内容这是题目内容
            这是题目内容这是题目内容这是题目内容这是题目内容这是题目内容这是题目内容
          </div>
          <img class="cover" src="../../image/course/swiper.jpg" alt="">
          <div class="selects" data-flex="main:center cross:center">
            <div class="select1">
              Yes
            </div>
            <div class="select2">
              No
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btns" data-flex="main:center">
      <div class="btn1">
        <div class="txt">上一题</div>
      </div>
      <div class="btn2">
        <div class="txt">下一题</div>
      </div>
    </div>
  </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
  // html 的引号一律为双引号(""),js 为单引号('')
  var USER, $S, vm;
  apiready = function () {
    $S = SERVICE();
    USER = USER();
    console.log(JSON.stringify(api.pageParam) + '=====pageParam');

    fnInit();
  };
  fnInit();
  // 初始化
  function fnInit() {
    vm = new Vue({
      el: '.vueApp',
      data: {
        info: null,
        listData: [],
        pageNo: 1,
        pageSize: 10
      }
    });
    getPageData();
  }

  function load() {
    getPageData('load');
    fnAddHeaderRefreshingEvent(function () { //设置下拉刷新
      getPageData('headerRefreshing');
    });

    fnAddFooterLoadingEvent(function () { // 设置上拉加载
      getPageData('load');
    });

  }

  // 获取页面数据
  function getPageData(sign) {
    if (sign == 'headerRefreshing') {
      vm.pageNo = 1;
    } else {
      vm.pageNo++;
    }
    var url = '';
    var params = {};
    var callback = function (data) {
      if (vm.pageNo == '1') {
        vm.listData = [];
      }
      var listData = data.listData;
      for (var i = 0; i < listData.length; i++) {
        var item = listData[i];

      }
      vm.listData = vm.listData.concat(data.listData);
      // status 为200时,只返回data
    };
    var error = function (res) {
      // status 不是200时,全部返回
      api.refreshHeaderLoadDone();
    };
    POST(url, params, callback, error);
  }

  // 点击item
  function handleItem(item) {

  }
</script>

</html>